import { FC, useEffect } from 'react';
import { Card } from 'antd';

import AMapLoader from '@amap/amap-jsapi-loader';

let map: any;
const Index: FC = () => {
  useEffect(() => {
    AMapLoader.load({
      key: '1c6e366e38075da4f35e70f04a3ee4a1', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        // 第一个参数是容器，容器要有高度
        // 第二个参数是配置对象

        // 创建地图实例就是地图的创建阶段
        map = new AMap.Map('container', {
          zoom: 15, //级别
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
        });

        // 地图的存在阶段
        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加载完成了');
        });

        //实时路况图层
        // const trafficLayer = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(trafficLayer); //添加图层到地图

        // 点标记
        const marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
          title: '旺田商务楼',
          icon: '//vdata.amap.com/icons/b18/1/2.png',
          offset: new AMap.Pixel(-10, -10),
        });
        map.add(marker); //添加到地图

        // 添加矢量图
        var lineArr = [
          [120.26408, 30.305451],
          [120.266424, 30.306046],
          [120.266392, 30.307713],
          [120.262648, 30.307852],
        ];
        var polyline = new AMap.Polyline({
          path: lineArr, //设置线覆盖物路径
          strokeColor: '#3366FF', //线颜色
          strokeWeight: 5, //线宽
          strokeStyle: 'solid', //线样式
        });
        map.add(polyline);

        // AMap.plugin('AMap.ToolBar', function () {
        //   //异步加载插件
        //   var toolbar = new AMap.ToolBar();
        //   map.addControl(toolbar);
        // });
        // AMap.plugin('AMap.Scale', function () {
        //   //异步加载插件
        //   var scale = new AMap.Scale();
        //   map.addControl(scale);
        // });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          //异步同时加载多个插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
          var scale = new AMap.Scale();
          map.addControl(scale);
        });

        map.setMapStyle('amap://styles/fresh');

        // 覆盖物1
        var polyline1 = new AMap.Polyline({
          path: [
            new AMap.LngLat('116.368904', '39.913423'),
            new AMap.LngLat('116.382122', '39.901176'),
          ],
        });

        // 覆盖物2
        var polyline2 = new AMap.Polyline({
          path: [
            new AMap.LngLat('116.387271', '39.912501'),
            new AMap.LngLat('116.398258', '39.904600'),
          ],
        });

        // 对此覆盖物群组设置同一属性
        overlayGroup.setOptions({
          strokeColor: 'red',
          strokeWeight: 5,
        });

        // 统一添加到地图实例上
        map.add(overlayGroup);

        // 创建覆盖物群组，传入覆盖物组成的数组
        var overlayGroup = new AMap.OverlayGroup([polyline1, polyline2]);

        map.on('click', (e: any) => {
          console.log(e);
          // const marker = new AMap.Marker({
          //   position: [e.lnglat.lng, e.lnglat.lat], //位置
          // });
          // map.add(marker);
          // 构造矢量圆形
          var circle = new AMap.Circle({
            center: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat), // 圆心位置
            radius: 200, //半径
            strokeColor: '#F33', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 3, //线粗细度
            fillColor: '#ee2200', //填充颜色
            fillOpacity: 0.35, //填充透明度
          });
          map.add(circle);
          // 自动匹配地图级别
          // map.setFitView();
        }); //绑定click事件

        map.on('zoomend', () => {
          console.log('地图缩放结束了');
        });
      })
      .catch((e) => {
        console.log(e);
      });

    // 组件卸载时触发
    return () => {
      console.log(123);
      map.destroy();
    };
  }, []);

  return (
    <>
      <Card title="地图">
        <div id="container" style={{ height: 500 }}></div>
      </Card>
    </>
  );
};

export default Index;
